<template>
<div id="Forget">
    <div class="title">
      <h1>数 字 鸽 业 精 准 管 控 云 服 务 平 台</h1>
    </div>
    <div class="lxl-login">
      <el-card class="box-card">
        <div class="lxl-title">
          <p style="font-size: 20px; margin:5px 0px 25px ">密 码 找 回</p>
        </div>
        <div class="lxl-form">
          <TheForm :callback="handleSubmit" :options="['phone','password','code','confirmPassword']" button="重 设 密 码"></TheForm>
        </div>
        <div style="display: flex; justify-content: flex-end">
          <router-link to="/login" style="font-size:14px">登录</router-link>
          <el-divider direction="vertical"></el-divider>
          <!-- <router-link to="/register" style="font-size:14px">注册</router-link> -->
        </div>
      </el-card>
    </div>
</div>
</template>
<script>
// import {
//   getCode
// }from "@/api/login/index"
import TheForm from "../../components/Login/TheForm"
export default {
  components:{
    TheForm,
  },
  props:{

  },
  data() {
    return {
      
    };
  },
  methods:{
        async handleSubmit(form){
      console.log('form: ', form);
      let {code,password,phone} = form;
      const {data : res} =  await getCode({code,password,phone})
      // console.log("拿到结果",res)
      if(res.statusCode === 20000){
        this.$message.success(res.message)
        this.$router.push("/BasicInfomation/BreedingBase");
      }else{
        this.$message.error(res.message);
        console.error(res.message);
      }
    }
  },

}
</script>
<style lang="scss" scoped>
#Forget {
  height: 100%;
 margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url("../../assets/image/login.jpg");
  background-size: cover;
}
  .title{
     position: absolute;
     top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  h1 {
      margin: 0 0 30px;
      padding: 0;
      color: rgb(251, 249, 249);
      text-align: center;
      font-size: 40px;
    }
/deep/.lxl-login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  width: 380px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;

.el-form {
      .el-form-item {
        .login {
        margin-top: 15px;
        margin-left: -40px;
          width: 105%;
          height: 43px;
          font-size: 18px;
          }
        }
    }
    .box-card {
  // height: 47%;
  // width: 380px;
  background-color: rgba(255, 255, 255, 0.815);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 2%;
}
}


a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}
.lxl-title {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
  color: rgba(56, 54, 54, 0.877);
}
</style>